<template>
	<view>
		<myWelcome v-if="showWelcome" />
		<myNewUser v-if="showNewUser" @closeNewUser="closeNewUser" />
		<!-- 功能栏 -->
		<view v-if="showMain">
			<image  class="backgroud" mode="aspectFill" :src="backgroudSrc"></image>
			<image  class="setting" :src="settingSrc" mode="aspectFit" @click="onClickSetting"></image>
			<myNotice v-if="notice.length>0" :list="notice"></myNotice>
			<view  class="mainView">
				<view class="iconInline">
					<myIcon class="myIcon" label="搜索" size="200rpx" borderRadius="80rpx" shadow="15rpx" bkColor="#f8f8f8" hoverColor="#dddddd" borderSize="2rpx" fontSize="28rpx" :src="searchUrl" url="/pages/search/search"></myIcon>
					<myIcon @myClick="onClickCamera" class="myIcon" label="拍照搜索" size="200rpx" borderRadius="80rpx" shadow="15rpx" bkColor="#f8f8f8" hoverColor="#dddddd" borderSize="2rpx" fontSize="28rpx" :src="cameraUrl" ></myIcon>
				</view>
				<view class="iconInline">
					<myIcon class="myIcon" label="周边" size="200rpx" borderRadius="80rpx" shadow="15rpx" bkColor="#f8f8f8" hoverColor="#dddddd" borderSize="2rpx" fontSize="28rpx" :src="collectUrl" url="/pages/collect/collect"></myIcon>
					<myIcon class="myIcon" label="环保排行" size="200rpx" borderRadius="80rpx" shadow="15rpx" bkColor="#f8f8f8" hoverColor="#dddddd" borderSize="2rpx" fontSize="28rpx" :src="rankUrl" url="/pages/rank/rank"></myIcon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				backgroudSrc:this.myConfig.storageUrl+'/static/backgroud.jpg',
				showWelcome:true,
				showNewUser:false,
				showMain:false,
				searchUrl:this.myConfig.storageUrl+'/static/search.png',
				cameraUrl:this.myConfig.storageUrl+'/static/camera.png',
				collectUrl:this.myConfig.storageUrl+'/static/collect.png',
				rankUrl:this.myConfig.storageUrl+'/static/rank.png',
				settingSrc:this.myConfig.storageUrl+'/static/setting.png',
				notice:[]
			}
		},
		onLoad() {
			const that=this;
			//登录
			wx.login({
				success:function(res){
					wx.request({
						url:that.myConfig.hostUrl+'/api/login.php',
						method:'POST',
						data:{
							code:res.code
						},
						success:function(ress){
							console.log('login',ress);
							that.myConfig.openId=ress.data.openId;
							if(ress.data.errCode==200){
								that.showWelcome=false;
								if(ress.data.newUser==true)
									that.showNewUser=true;
								else
									that.showMain=true;
							}
							else if(ress.data.errCode==403){
								uni.showToast({
									title:'您的账号已被封禁，请注意使用规范！',
									icon:'none',
									duration:2000
								});
							}else{
								uni.showToast({
									title:'请检查网络后重试',
									icon:'none',
									duration:2000
								});
							}
						},
						fail:function(){
							uni.showToast({
								title:'请检查网络后重试',
								icon:'none',
								duration:2000
							});
						}
					});
				}
			});
			wx.request({
				url:that.myConfig.hostUrl+'/api/notice.php',
				success:function(res){
					console.log('notice',res);
					if(res.data.errCode==200){
						that.notice=res.data.notice;
					}
				}
			});
		},
		methods: {
			onClickCamera(){
				const that=this;
				wx.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success:function(res) {
						uni.navigateTo({
							url:'../analysis/analysis?src='+res.tempFilePaths[0]
						});
					}
				});
			},
			onClickSetting(){
				uni.navigateTo({
					url:'../setting/setting'
				});
			},
			closeNewUser(){
				console.log('ok')
				const that=this;
				that.showNewUser=false;
				that.showMain=true;
			}
		}
	}
</script>
<style>
	
</style>
<style scoped>
	@keyframes convergence{
		from{
			width: 750rpx;
			height: 1000rpx;
			margin-left: -375rpx;
			margin-top: -500rpx;
		}to{
			width: 440rpx;
			height: 440rpx;
			margin-left: -220rpx;
			margin-top: -220rpx;
		}
	}
	.setting{
		height: 100rpx;
		width: 100rpx;
		position: fixed;
		top: 50rpx;
		right: 50rpx;
	}
	.backgroud{
		width: 100%;
		height: 100%;
		position: fixed;
		background-size:100% 100%;
		top: 0rpx;
		z-index: -1;
	}
	.mainView{
		width: 440rpx;
		height: 440rpx;
		display: flex;
		justify-content:space-between;
		flex-direction:column;
		position: fixed;
		left: 50%;
		margin-left: -220rpx;
		top: 50%;
		margin-top: -220rpx;
		animation: convergence 1s ease, load 1s linear;
	}
	.iconInline{
		display: flex;
		align-items: center;
		justify-content:space-between;
	}
	.myIcon{
		display: inline-block;
		opacity: 0.8;
	}
</style>
